<template>
  <div>
    <h1>MyPage</h1>
    <My-button :text="111" type="success" size="big" @click.native="ff"></My-button>
    <My-child v-bind:text="title" v-on:back2="backFun2"></My-child>
    <!-- 父向子传参 -->
    <!-- 在引入的组件中绑定自定义属性，然后在子组件中通过props属性接收 -->
    <!-- 子向父传参
      在子组件中调用$emit() 进而出发在父级的自定义事件，并且在事件处理函数中结束$emit 传递过来的参数
     -->
     <!-- 
      封装一个组件
      应该考虑复用性
      低耦合
      -->
      <div v-on:click="openMotai" >点击打开模态框</div>
      <Modal-box :visable.sync="tab" @close="openClose"></Modal-box>
      <My-sync :text.sync="name"></My-sync>
      <!-- v-bind 修饰符 可以用来父组件和子组件的数据双向绑定 -->
      <!-- .sync 它允许子组件直接更新父组件传递给props的值  -->

  </div>
</template>

<script>
import MyButton from "../components/MyButton.vue";
import MyChild from "../components/MyChild.vue";
import ModalBox from '../components/ModalBox.vue';
import MySync from '../components/MySync.vue';
export default {
  data() {
    return {
      title: [1, 2, 3],
      tab:false,
      name:"张三"//双向绑定用的
    };
  },
  methods: {
    openClose(val){
        this.tab=val
    },
    openMotai(){
      this.tab=true
      console.log(this.tab,'tab')
    },
    backFun(val) {
      console.log(val,'val')
    },
    backFun2(val){
      console.log(val,'val2')
    },
    ff(){
      console.log('sssss')
    }
  },
  components: {
    MyButton,
    MyChild,
    ModalBox,
    MySync
  },
};
</script>

<style>
</style>